<template>
  <view class="">
    <view class="" v-if="hide">
      <!-- 轮播 -->
      <uni-swiper-dot
        :info="detail.houseImg"
        :current="current"
        field="content"
        :mode="mode"
      >
        <swiper
          class="swiper-box"
          :autoplay="true"
          :interval="interval"
          circular
          @change="change"
        >
          <swiper-item v-for="(item, index) in detail.houseImg" :key="index">
            <view class="swiper-item">
              <image :src="item" mode="scaleToFill" style="width: 100%" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>

      <!-- 标题 -->
      <view class="">
        <uni-title
          type="h3"
          align="center"
          :title="detail.title"
          color="#439ffc"
        ></uni-title>
      </view>
      <view class="desc">
        <view class="dit">
          <uni-title
            :title="'￥' + detail.price + '/月'"
            align="center"
            color="orange"
          ></uni-title>
        </view>
        <view class="dit">
          <uni-title
            :title="detail.size + '㎡'"
            align="center"
            color="orange"
          ></uni-title>
        </view>
        <view class="dit">
          <uni-title
            :title="detail.roomtype"
            align="center"
            color="orange"
          ></uni-title>
        </view>
        <view class="dit">
          <uni-title title="价格" align="center"></uni-title>
        </view>
        <view class="dit">
          <uni-title title="面积" align="center"></uni-title>
        </view>
        <view class="dit">
          <uni-title title="户型" align="center"></uni-title>
        </view>
      </view>

      <view class="desc">
        <view class="ddit">
          <uni-title title="朝向" align="center"></uni-title>
        </view>
        <view class="ddit">
          <uni-title title="楼层" align="center"></uni-title>
        </view>
        <view class="ddit">
          <uni-title :title="detail.oriented + '|'" align="center"></uni-title>
        </view>
        <view class="ddit">
          <uni-title :title="detail.floor" align="center"></uni-title>
        </view>
      </view>
      <view class="" style="padding-left: 5px; border: 1px solid #c0c0c0">
        <uni-title type="h3" :title="detail.community"></uni-title>
      </view>
      <view class="map" style="height: 300px">
        <map
          style="width: 100%; height: 300px"
          :latitude="detail.coord.latitude"
          :longitude="detail.coord.longitude"
          :markers="markers"
        ></map>
      </view>
      <uni-fab
        ref="fab"
        :pattern="pattern"
        :content="content"
        vertical="bottom"
        direction="horizontal"
        @trigger="trigger"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      detail: [], //详情描述列表
      current: 0, //轮播下标
      mode: "round", //轮播行为
      interval: "2000", //轮播时间
      markers: [], // 地图覆盖
      hide: false, //判断是否加载
      pattern: {
        color: "#7A7E83",
        backgroundColor: "#fff",
        selectedColor: "#007AFF",
        buttonColor: "#007AFF",
        iconColor: "#fff",
      },
      content: [
        {
          iconPath: "/static/img/1.png",
          selectedIconPath: "/static/img/4.png",
          text: "电话",
          active: false,
        },
        {
          iconPath: "/static/img/2.png",
          selectedIconPath: "/static/img/5.png",
          text: "客服",
          active: false,
        },
        {
          iconPath: "/static/img/3.png",
          selectedIconPath: "/static/img/6.png",
          text: "收藏",
          active: false,
        },
      ],
    };
  },
  methods: {
    async getdetail(code) {
      let res = await this.$api.getDetail(code);
      if (res.data.code == 200) {
        console.log(res);
        this.detail = res.data.msg;
        this.hide = true;
        // this.isload = true;
        console.log(this.detail);
        //添加覆盖属性
        let opt = {
          id: 1,
          latitude: this.detail.coord.latitude,
          longitude: this.detail.coord.longitude,
          iconPath: "/static/img/zu.webp",
          height: 20,
          width: 20,
          alpha: 0.5,
          callout: {
            content: this.detail.community,
            bgColor: "skyblue",
            borderWidth: 2,
            display: "ALWAYS",
          },
        };
        this.markers.push(opt);
        // 判断是否收藏
        this.iscoll();
      }
    },

    change(e) {
      //轮播图点击事件
      this.current = e.detail.current;
    },
    trigger(e) {
      // console.log(e);
      if (e.index == 2) {
        this.collect();
      }
    },
    collect() {
      //收藏
      console.log();
      //收藏信息
      let { houseCode, houseImg, price, title } = this.detail;
      let needcoll = {
        //需要收藏的信息
        houseCode,
        houseImg: houseImg[0],
        price,
        title,
      };
      console.log(this.detail);
      let iscoll = this.content[2].active;
      let collarr = uni.getStorageSync("collarr");
      console.log(collarr);
      if (iscoll) {
        //收藏状态 此事件取消收藏
        this.content[2].active = false;
        collarr = collarr.filter((v) => v.houseCode != houseCode);
        console.log(collarr);
        //更新本地存储
        uni.setStorageSync("collarr", collarr);
      } else {
        //未收藏状态 此事件添加收藏
        this.content[2].active = true;
        console.log(this.content[2].active);
        //看是不是第一次收藏 存储到本地
        if (collarr) {
          //已收藏过
          //添加点击的房源信息
          collarr.push(needcoll);
          console.log(6666);
          //更新本地存储
          uni.setStorageSync("collarr", collarr);
        } else {
          //未收藏过
          let arr = [needcoll]; //添加收藏
          console.log(arr);
          //添加本地存储
          uni.setStorageSync("collarr", arr);
          console.log(collarr);
        }
      }
    },
    iscoll() {
      //是否收藏过
      //改变高亮
      let collarr = uni.getStorageSync("collarr");
      if (collarr) {
        this.content[2].active = collarr.some(
          (v) => v.houseCode == this.detail.houseCode
        );
      }
    },
  },
  onLoad(code) {
    this.getdetail(code);
  },
};
</script>

<style>
.swiper-box {
  height: 200px;
  width: 100%;
}
.swiper-item > img {
  height: 200px;
  width: 100%;
}
.desc {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
  /* border-bottom: 1px solid #C0C0C0; */
  border-top: 1px solid #c0c0c0;
}
.dit {
  width: 30%;
  height: 30px;
  border: 1px solid #c0c0c0;
  margin-top: 5px;
}
.ddit {
  width: 45%;
  height: 30px;
  border: 1px solid #c0c0c0;
  margin-top: 5px;
}
.tab {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #c0c0c0;
  background: white;
  z-index: 1;
}
</style>